<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>005_dom操作样式.html</title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn01">点我一下</button>
    <div id="box1"></div>

<script type="text/javascript">
    var btn01 = document.getElementById("btn01");
    var box1 = document.getElementById("box1");
    btn01.onclick = function () {

        // 获取元素当前显示的样式, 元素.currentStyle.样式名, 这种方式仅仅支持IE系列的浏览器
        // alert(box1.currentStyle.width);

        // 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式,如果获取的样式没有设置，则它会获取到真实的值，不会获取到默认值，
        // 比如：没有设置width，它不会获取到auto，而是获取到一个具体的长度
        var obj = getComputedStyle(box1, null);
        alert(obj.width);

    }
</script>
</body>
</html>